<template>
  <div class="typeNavBox">

    <!-- 一级菜单 -->
    <div class="typeNav">
      <!-- <h1>三级列表联动组件</h1> -->

      <div class="ul">
        <div class="item">

          <div class="li common1">
            <a href="javascript:;">手机
            </a>
            <span><i class="iconfont icon-fanhui2"></i></span>
          </div>

          <!-- 二级菜单 -->
          <div class="twoMenu">
                <div class="menuLeft">
                   <span><a href="javascript:;">Mate系列</a> </span>
                   <span><a href="javascript:;">P系列</a></span>
                   <span><a href="javascript:;">Nova系列</a> </span>
                   <span><a href="javascript:;">畅享系列</a> </span>
                   <span><a href="javascript:;">华为认证二手手机</a> </span>
                </div>
                <div class="menuRight">
                   <button>查看全部</button>
                </div>
          </div>

        </div>

        <div class="item">
          <div class="li common1"><a href="javascript;;">电脑 </a>
            <span><i class="iconfont icon-fanhui2"></i></span>
          </div>

          <!-- 二级菜单 -->
          <div class="twoMenu"></div>

        </div>


        <div class="item">
          <div class="li common1"><a href="javascript;;">手平板 </a>
            <span><i class="iconfont icon-fanhui2"></i></span>
          </div>
          <!-- 二级菜单 -->
          <div class="twoMenu"></div>
        </div>


        <div class="item">
          <div class="li common1"><a href="javascript;;">智慧屏 </a>
            <span><i class="iconfont icon-fanhui2"></i></span>
          </div>
          <!-- 二级菜单 -->
          <div class="twoMenu"></div>
        </div>


        <div class="item">
          <div class="li common1"><a href="javascript;;">穿戴</a>
            <span><i class="iconfont icon-fanhui2"></i></span>
          </div>
          <!-- 二级菜单 -->
          <div class="twoMenu"></div>
        </div>


        <div class="item">
          <div class="li common1"><a href="javascript;;">耳机音响 </a>
            <span><i class="iconfont icon-fanhui2"></i></span>
          </div>
          <!-- 二级菜单 -->
          <div class="twoMenu"></div>
        </div>


        <div class="item">
          <div class="li common1"><a href="javascript;;">门锁路由</a>
            <span><i class="iconfont icon-fanhui2"></i></span>
          </div>
          <!-- 二级菜单 -->
          <div class="twoMenu"></div>
        </div>


        <div class="item">
          <div class="li common1"><a href="javascript;;">出行车品 </a>
            <span><i class="iconfont icon-fanhui2"></i></span>
          </div>
          <!-- 二级菜单 -->
          <div class="twoMenu"></div>
        </div>


        <div class="item">
          <div class="li common1"><a href="javascript;;">配件 </a>
            <span><i class="iconfont icon-fanhui2"></i></span>
          </div>
          <!-- 二级菜单 -->
          <div class="twoMenu"></div>
        </div>


        <div class="item">
          <div class="li common1"><a href="javascript;;">生态产品 </a>
            <span><i class="iconfont icon-fanhui2"></i></span>
          </div>
          <!-- 二级菜单 -->
          <div class="twoMenu"></div>
        </div>


        <div class="item">
          <div class="li common1"><a href="javascript;;">美食酒饮</a>
            <span><i class="iconfont icon-fanhui2"></i></span>
          </div>
          <!-- 二级菜单 -->
          <div class="twoMenu"></div>
        </div>


        <div class="item">
          <div class="li common1"><a href="javascript;;">增值服务/企业商用 </a>
            <span><i class="iconfont icon-fanhui2"></i></span>
          </div>
          <!-- 二级菜单 -->
          <div class="twoMenu"></div>
        </div>


      </div>

    </div>



  </div>

</template>

<script>

export default {
  name: "TypeNav",
}

</script>

<style lang="scss" scoped>
@charset 'utf-8';
@import '../../../public/scss/common.scss';

//vw单位响应式布局
@function get($a) {
  @return ($a/1920)*100+vw
}

.typeNavBox {
   position: relative;
  >.typeNav {
    position: absolute;
    top: get(100);
    left: get(120);
    height: get(480);
    padding: get(20) 0;
    // height: get(450);
    //border: 1px solid #000;
    box-shadow: 1px 1px 10px 1px rgb(161 151 151);
    //border-radius: get(6);
    background-color: #fff;
    z-index: 100;

    >.ul {
      

      >.item {
       
        >.li {
          width: get(240);
         

          >a {
            margin-left: get(20);
            margin-bottom: get(10);
            font-size: get(18);

            &:hover {
              color: $color;
            }
          }

          >span {
            margin-right: get(20);
            margin-bottom: get(10);

          }
         
        }

         //隐藏的二级菜单
        >.twoMenu {
          display: none;
          width: get(600);
          height: get(520);
          //box-shadow: 1px 1px 1px 1px rgb(211, 206, 206) ;
          background-color: #fff;
          position: absolute;
          top: get(0);
          left: get(240);
         // z-index: 9999 ;
           >.menuLeft{
                      
            width: get(500);
            height: get(420);
            //border: 1px solid #000;
            z-index: 999;
            >span{
              display: block;
              
              >a{
                color: #000;
                
              }
            }
           }
           >.menuRight{}
        }

        &:hover{
          .twoMenu{
            display: block;
          }
        
        }
      }


    }
  }
}
</style>
